<template>
    <!-- <el-tabs v-model="activeTab" type="card" class="tabs-container">
      <el-tab-pane label="建立单人纪念馆" name="single">
        <SingleForm :relationshipList="relationshipList"/>
      </el-tab-pane>
      <el-tab-pane label="建立双人纪念馆" name="double">
        <DoubleForm :relationshipList="relationshipList"/>
      </el-tab-pane>
    </el-tabs> -->
    <div class="tabs-container">
        <div class="tabs-container-list">
            <div class="tabs-container-list-item" :class="{'active': activeTab === 'single'}" @click="activeTab = 'single'">
                建立单人纪念馆
            </div>
            <div class="tabs-container-list-item" :class="{'active': activeTab === 'double'}" @click="activeTab = 'double'">
                建立双人纪念馆
            </div>
        </div>
        <SingleForm :relationshipList="relationshipList" v-if="activeTab === 'single'" :mu_id="memorialId"/>
        <DoubleForm :relationshipList="relationshipList" v-if="activeTab === 'double'" :mu_id="memorialId"/>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import SingleForm from './singleForm.vue'
import DoubleForm from './doubleForm.vue'
import { apiMyMuEdit, apiMyMuDetail, apiMyMuRelation } from '@/api/graveyard'
import { useRoute } from 'vue-router'

const route = useRoute()
const memorialId = ref()
const props = defineProps({
    memorialId: {
        type: String,
        default: ''
    }
})
const activeTab = ref('single')
// 获取情感关系
const relationshipList = ref([])
const getRelationshipList = async () => {
    const data = await apiMyMuRelation({ page_no: 1, page_size: 9999 })
    relationshipList.value = data
}

onMounted(() => {
    getRelationshipList()
})
</script>

<style scoped>
.tabs-container {
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    /* margin: 40px auto; */
}

.tabs-container-list {
    width: 100%;
    padding: 0 60px;
    box-sizing: border-box;
    display: flex;
    border-bottom: 1px solid #E5E5E5;
}
.tabs-container-list-item{
    padding: 5px 20px;
    border-radius: 10px 10px 0 0;
    background-color: #999;
    color: #fff;
    cursor: pointer;
}
.tabs-container-list-item:hover{
    background-color: #ff6600;
}
.active{
    background-color: #ff6600;
    color: #fff;
}
</style>